
@charset "utf-8";
/* 1.声明样式表 css指定编码集：防止乱码 */
/* 2.通用的样式
     元素--盒模型中：内外边距+内容+边框
	                *元素默认默认自带外边距：body，h1~h6，p，ul/ol
	④通用选择器：选中所有元素添加【效果】样式
	语法：*{默认需要效果}
*/
*{
	margin: 0;
	padding:0;
	/* 字体属性 */
	font-family: "华文彩云";
	font-size: 100px;
}

body{
	/* 背景属性【复合属性：省去部分属性值】 
	background：color，image，origin，size，repeat
	常用简写：image size repeat;
	用途：页面频繁改变位置的图片，与img元素固定在一个位置
	字属性 background-color 背景颜色属性【二选一】
	       background-image 背景图片属性【二选一】
		                    属性值：url(路径)/url(""或'')
		   background-size  背景尺寸属性
		                    属性值1一个，属性值2个【推荐】
							x【宽度】  y轴【高度】
			background-repeat 背景铺平效果
			                  属性值 no-repeat 不平铺
	*/
	background-image: url(../img/bg.jpg);
	/* 背景尺寸属性 */
	background-size: 100% 927px;
	/* 背景平铺属性 */
	background-repeat: no-repeat;
}
/* 熊猫 */
.bear{
	width: 350px;
	height: 500px;
	/* 判断选择器是否选中 */
	bor der: 1px solid red;
	/* 背景图片 复合属性 */
	 background: url(../img/bear_1.png);
	 /* 出现背景-背景大于空间--设置背景尺寸*/
	 background-size: 100% 100%;
	 position: relative;
	top: -109px;
	left: -10px;
	animation: bear 5s linear infinite;

}
/* 动画1.写关键帧 2.元素添加动画，找到元素添加动画属性
   关键帧特点，在启动元素动画位置，继承父元素：定位
*/
@keyframes bear{
	/* 简单位移 */
	0%{
		left: 800px;
	}
	10%{
		top: 200px;
		background: url(../img/bear_1.png);
		/*  */
		background-size: 100% 100%;
	}
	20%{
		background: url(../img/bear_2.png);
		left: 100px;
		background-size: 100% 100%;
	}
	30%{
		background: url(../img/bear_3.png);
		top: -10px;
		left: 1068px;
		background-size: 100% 100%;
	}
	40%{
		background: url(../img/bear_4.png);
		top: 267px;
		left: 1132px;

		background-size: 100% 100%;
	}
	50%{
		background: url(../img/bear_5.png);
		top: 267px;
		left: 1000px;

		background-size: 100% 100%;
	}
	60%{
		background: url(../img/bear_6.png);
		top: 267px;
		left: 800px;

		background-size: 100% 100%;
	}
	70%{
		background: url(../img/bear_7.png);
		top: 267px;
		left: 600px;

		background-size: 100% 100%;
	}
	80%{
		background: url(../img/bear_8.png);
		top: 267px;
		left: 400px;

		background-size: 100% 100%;
	}
	90%{
		background: url(../img/bear_9.png);
		top: 267px;
		left: 200px;

		background-size: 100% 100%;
	}
	100%{background: url(../img/bear_10.png);
	top: -1000px;
	left: 0;

	background-size: 100% 100%;
	}
}
